<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-06-10 11:56:37
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-07-06 15:47:25
 * @FilePath: \XiChangWeb\components\groupTable\table2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <template>
      <el-table
        ref="leftTable"
        :key="JSON.stringify(tableConfig)"
        :data="tableData"
        :height="tableHeight"
        :border="true"
        :fit="true"
        :cell-class-name="cellStyle"
        :row-class-name="comsys.tabRowClassName"
        :highlight-current-row="isHithtLight"
        @cell-mouse-enter="mouseEnter"
        @cell-mouse-leave="mouseLeave"
        @row-click="rowClick"
        @select="handleSelect"
        @selection-change="handleSelectionChange">
        <el-table-column
          label="序号"
          type="index"
          width="50"
        />
        <el-table-column
          v-if="operationList[0].Checkbox"
          type="selection"
          width="45"
        />
        <!-- 循环一级 -->
        <!-- v-if="i.show === undefined || (i.show && i.children && i.children.length)" -->
        <template v-for="i in tableConfig">
          <el-table-column
            v-if="(i.children && i.children.length) ? JSON.stringify(i.children).indexOf('true')>-1:false"
            :label="i.label"
            :prop="i.prop"
            :min-width="comsys.flexColumnWidth(i.prop, tableData, 'max', i.label)"
            :key="i.id"
            :fixed="i.fixed"
            align="center">
            <!-- 循环二级 -->
            <template v-for="j in i.children">
              <el-table-column
                v-if="j.children && j.children.length"
                :label="j.label"
                :prop="j.label"
                :key="j.id"
                align="center">
                <!-- 循环三级 -->
                <template v-for="k in j.children">
                  <el-table-column
                    v-if="k.children && k.children.length"
                    :label="k.label"
                    :prop="k.label"
                    :key="k.id"
                    align="center"/>
                  <el-table-column
                    v-else-if="k.show"
                    :key="k.id+k.label"
                    :label="k.label"
                    :prop="k.prop"
                    align="center"/>
                </template>
              </el-table-column>
              <el-table-column
                v-else-if="j.show"
                :key="j.id+j.label"
                :label="j.label"
                :prop="j.prop"
                :min-width="j.width || comsys.flexColumnWidth(j.prop, tableData, 'max', j.label)"
                align="center">
                <template slot-scope="scope">
                  {{ scope.row[j.prop] | numToFiexed }}
                </template>
              </el-table-column>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="i.show"
            :key="i.id+i.label"
            :label="i.label"
            :prop="i.prop"
            :min-width="i.width || comsys.flexColumnWidth(i.prop, tableData, 'max', i.label)"
            align="center">
            <template slot-scope="scope">
              {{ scope.row[i.prop] | numToFiexed }}
            </template>
          </el-table-column>
        </template>
        <!--<el-table-column
          v-if="dropdown"
          label="人工标记/排除"
          align="center"
        >
          <template slot-scope="scope">
            <el-select v-model="scope.row.marked" filterable placeholder="请选择" @change="selectList(scope.row)">
              <el-option
                v-for="item in operationList[0].selectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </template>
        </el-table-column>-->
        <slot/>
        <el-table-column
          v-if="tableBotton.length >0"
          :label="operationList[0].title"
          :min-width="operationList[0].width"
          :fixed="operationList[0].fixed"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              v-for="item in tableBotton"
              :key="item.id+item.type+'btn'"
              :type="item.type"
              size="mini"
              @click="handle(item, scope)">{{ item.name }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="pagin">
      <el-pagination
        v-if="tableTotal[0].isShow === undefined || tableTotal[0].isShow"
        :current-page="tableTotal[0].pageNum"
        :page-sizes="[30, 50, 100, 200, 300]"
        :page-size="tableTotal[0].pageSize"
        :total="tableTotal[0].total"
        class="paginationSizi"
        align="center"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
      <el-button 
        v-if="operationList[0].HeaderSetting!==1" 
        class="setBtn" 
        type="warning" 
        size="mini" 
        @click="dialogVisible = true">表头设置</el-button>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      title="提示"
      width="30%">
      <div 
        style="max-height: calc(100vh - 200px);overflow-y: auto;" 
        class="barStyel">
        <el-tree
          ref="tree"
          :data="tableConfig"
          :props="defaultProps"
          :default-checked-keys="defaultAll"
          default-expand-all
          show-checkbox
          accordion
          node-key="id"
          @check-change="handleCheckChange"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableColumn from '@/components/groupTable/table1.vue'
export default {
  components: {
    TableColumn
  },
  props: {
    // 表格高度
    tableHeight: {
      type: String,
      default: '300px'
    },
    // 表格的数据
    tableData: {
      type: Array,
      required: true
    },
    // 多级表头的数据
    tableHeader: {
      type: Array,
      required: true
    },
    // 分页
    tableTotal: {
      type: Array,
      default: function() {
        return [
          {
            pageNum: 1,
            pageSize: 100,
            total: 0,
            isShow: false
          }
        ]
      }
    },
    // table按钮
    tableBotton: {
      type: Array,
      default: function() {
        return []
      }
    },
    operationList: {
      type: Array,
      required: true
    },
    // select下拉选择
    dropdown: {
      type: Boolean,
      default: false
    },
    isHithtLight: {
      type: Boolean,
      default: false
    }
    // fatherMsg: {
    //   type: Function,
    //   default: null
    // }
  },
  data() {
    return {
      showPopper: false,
      dialogVisible: false,
      // checkList: [],
      defaultAll: [],
      tableConfig: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  // watch: {
  //   tableConfig: {
  //     handler(newVal, oldVal) {
  //       console.log(newVal, oldVal)
  //     },
  //     deep: true,
  //     immediate: true
  //   }
  // },
  created() {
    /* 处理默认参数（id，show）*/
    this.tableHeader.map((item, index) => {
      item.id = index + 1
      if (item.show === undefined) {
        item.show = true
      }
      if (item.children !== undefined) {
        item.children.map((itemChild, indexChild) => {
          itemChild.id = item.id * 100 + indexChild
          if (itemChild.show === undefined) {
            itemChild.show = true
          }
          if (itemChild.children !== undefined) {
            itemChild.children.map((itemGrandC, indexGrandC) => {
              itemGrandC.id = itemChild.id * 100 + indexGrandC
              if (itemGrandC.show === undefined) {
                itemGrandC.show = true
              }
            })
          }
        })
      }
    })
    this.tableConfig = this.tableHeader
    this.defaultAll = this.tableHeader.map(item => item.id)
    // console.log('1123123', this.operationList)
    // this.checkList = this.tableHeader.map(i => i.label)
    // this.matchAllLable(this.tableHeader)
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      data.show = checked

      // this.tableConfig = data
      // console.log(data)
      // console.log(this.tableConfig)
    },
    setHight(row) {
      this.$refs.leftTable.setCurrentRow(row)
    },
    // 获取所有的table里的lable
    // matchAllLable(arr, labels = []) {
    //   if (arr.length === 0) return labels
    //   arr.forEach((i) => {
    //     labels.push(i.label)
    //     if (i.children && i.children.length > 0) {
    //       this.matchAllLable(i.children, labels)
    //     }
    //   })
    //   this.checkList = labels
    //   // return labels
    // },
    // test(event) {
    //   // console.log('选中的内容', event)
    //   this.tableConfig = this.tableHeader.filter(i => event.includes(i.label))
    //   console.log('this.tableConfig', this.tableConfig)
    // },
    handleSelect(list, item) {
      /* if (list.includes(item)) {
        // 勾选时做的事
        // console.log('成功')
      } else {
        // 取消勾选时做的事，arguments[1]是当前取消勾选的项
        this.$parent.$parent.Checkbox(arguments[1].id)
      }*/
    },
    handleSelectionChange(row, index) {
      if (this.$parent.CheckboxList === undefined) {
        this.$parent.$parent.CheckboxList(row)
      } else {
        this.$parent.CheckboxList(row)
      }
      // console.log(row)
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      if (this.$parent.handleSizeChange === undefined) {
        this.$parent.$parent.handleSizeChange(val)
      } else {
        this.$parent.handleSizeChange(val)
      }
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      if (this.$parent.handleCurrentChange === undefined) {
        this.$parent.$parent.handleCurrentChange(val)
      } else {
        this.$parent.handleCurrentChange(val)
      }
    },
    handle(id, scope) {
      // console.log(this.$parent, 'this.$parent.')
      if (this.$parent.tableBotton === undefined) {
        this.$parent.$parent.clickMe(id, scope)
      } else {
        this.$parent.clickMe(id, scope)
      }
    },
    // 设置单个单元格样式   行下标：rowIndex    列下标：columnIndex
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.label === '状态' && column.property === 'data_status') {
        if (row.data_status === 3) {
          return 'cellRed'
        } else if (parseInt(row.data_status) === 1) {
          return 'cellGreen'
        } else {
          return 'cellYellow'
        }
      }
      // console.log(column)
      if (
        column.label === 'FDT' &&
        column.property === 'FDT' &&
        column.id === 'el-table_1_column_34_column_35'
      ) {
        const str = row.FDT.substr(0, row.FDT.length - 1)
        if (str < 80) {
          return 'cellStyleRed'
        } else if (str >= 90) {
          return 'cellStyleGreen'
        } else {
          return 'cellStyleYellow'
        }
      }
      if (
        column.label === 'CT' &&
        column.property === 'CT' &&
        column.id === 'el-table_1_column_34_column_36'
      ) {
        const str = row.CT.substr(0, row.CT.length - 1)
        if (str < 80) {
          return 'cellStyleRed'
        } else if (str >= 90) {
          return 'cellStyleGreen'
        } else {
          return 'cellStyleYellow'
        }
      }
      if (
        column.label === '厚度' &&
        column.property === 'hd' &&
        column.id === 'el-table_1_column_34_column_37'
      ) {
        const str = row.hd.substr(0, row.hd.length - 1)
        if (str < 80) {
          return 'cellStyleRed'
        } else if (str >= 90) {
          return 'cellStyleGreen'
        } else {
          return 'cellStyleYellow'
        }
      }
      if (
        column.label === '宽度' &&
        column.property === 'kd' &&
        column.id === 'el-table_1_column_34_column_38'
      ) {
        const str = row.kd.substr(0, row.kd.length - 1)
        if (str < 80) {
          return 'cellStyleRed'
        } else if (str >= 90) {
          return 'cellStyleGreen'
        } else {
          return 'cellStyleYellow'
        }
      }
    },
    mouseEnter(row, column) {
      if (column.label === '数据源' && column.property === 'coil_loss') {
        if (row.coil_loss === 1) {
          this.showPopper = true
          console.log(row, column, 'mouseEnter')
        }
      }
    },
    mouseLeave(row, column) {
      if (column.label === '数据源' && column.property === 'coil_loss') {
        if (row.coil_loss === 1) {
          this.showPopper = false
        }
      }
    },
    judge(str) {
      if (str < 80) {
        return 'cellStyleRed'
      } else if (str >= 90) {
        return 'cellStyleGreen'
      } else {
        return 'cellStyleYellow'
      }
    },
    selectList(row) {
      this.$emit('selectList', row)
    },
    rowClick(row, event) {
      this.$emit('rowClick', row, event)
    }
  }
}
</script>
<style lang="scss">
/* background-color: green;
  border-radius: 11px;
  width: 30%;
  margin-left: 35%; */
.pagin {
  overflow: hidden;
  margin-top: 10px;
  .paginationSizi {
    // float: left;
  }
  .setBtn {
    margin-left: 10px;
    margin-top: 5px;
  }
}
.cellRed {
  .cell {
    color: red !important;
    background-color: red;
    display: inline-block;
    border-radius: 50%;
  }
}

.cellGreen {
  .cell {
    color: green !important;
    background-color: green;
    display: inline-block;
    border-radius: 50%;
  }
}

.cellYellow {
  .cell {
    color: yellow !important;
    background-color: yellow;
    display: inline-block;
    border-radius: 50%;
  }
}
.cellStyleRed {
  color: red !important;
}
.cellStyleGreen {
  color: green !important;
}
.cellStyleYellow {
  color: yellow !important;
}
</style>
